<template>
  <div>
    <div>
      <span>用户名:</span>
      <!-- ----------------------1. v-model
         双向数据绑定
         value属性 - vue变量
       -->
      <input type="text" v-model="username" />
    </div>
    <div>
      <span>密码: </span>
      <input type="password" v-model="pass" />
    </div>

    <div>
      <span>来自：</span>
      <!-- <select> 身上写 v-model ,option 写value-->
      <select v-model="from">
        <option value="北京">北京市</option>
        <option value="上海">上海市</option>
        <option value="广州">广州市</option>
        <option value="深圳">深圳市</option>
      </select>
    </div>

    <div>
      <span>爱好：</span>
      <!-- 复选框 -->
      <!-- vue 变量 非数组类型 关联复选框 checked属性（true/flase）值 -->
      <!-- vue 变量   数组类型 关联复选框  value 属性值 -->
      <input type="checkbox" v-model="hobby" value="跳舞" />跳舞
      <input type="checkbox" v-model="hobby" value="书法" />书法
      <input type="checkbox" v-model="hobby" value="唱歌" />唱歌
    </div>

    <div>
      <span>单选：</span>
      <!-- 必须有相同的name值 -->
      <input type="radio" value="男生" v-model="gender" name="sex" />男
      <input type="radio" value="女生" v-model="gender" name="sex" />女
    </div>

    <div>
      <span>自我介绍：</span>
      <textarea v-model="intro" name="" id="" cols="30" rows="10"></textarea>
    </div>
  </div>
</template>

<script>
// 目标：v-model 指令
//作用： 把value 属性和Vue 变量（双向）绑定到一起
//语法： v-model="vue变量"
//双向：数据影响视图，视图影响数据
//表单标签值（value属性）改变 ---> vue变量
// Vue 变量改变---> value 属性改变（视图更新）

export default {
  data() {
    return {
      username: "小朱",
      pass: "",
      from: "北京",
      hobby: [], //数组类型
      gender: "男生",
      intro: "",
    };
  },
};
</script>

<style>
</style>